<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <textarea name="" id="" cols="30" rows="10" value="">还能不能做交互</textarea>
    <button onclick="startCalc()">开始</button>
    <button onclick="stopCalc()">停止</button>
    <div id="result"></div>
    <div>
        <iframe sandbox="allow-scripts " src="child.html" frameborder="0"></iframe>
    </div>
</body>
<script>
    // function startCalc() {
    //     const iframe = document.querySelector('iframe')
    //     iframe.src = 'child.html'
    // }
    // function stopCalc() {
    //     const iframe = document.querySelector('iframe')
    //     iframe.src = ''
    // }
    function startCalc() {
        emitMessage('start', 'start')
    }
    function emitMessage(type,data) {
        const iframe = document.querySelector('iframe')
        iframe.contentWindow.postMessage({type: 'start',data}, '*')
    }
    window.addEventListener('message', (e) => {
        console.log(e.data)
        if(e.data.type === 'calcOk'){
            const result = document.querySelector('#result')
            result.innerHTML = e.data.data
        }
    })
</script>
</html>